<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>register</title>
<link rel="stylesheet" href="system/css/bootstrap.css" />
<link href="system/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
	media="screen">
<script src="system/js/jquery-3.1.0.min.js"></script>
<script src="system/js/bootstrap.js"></script>
<script type="text/javascript" src="system/js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="system/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="system/js/jquery.form.js" charset="UTF-8"></script>
<script>
        $(function(){
            //用户向后台请求查询，判断是否存在相同的账号
            var options = {
                beforeSubmit : showRequest, // pre-submit callback
                success : showResponse, // post-submit callback
                url : "RegisterServlet", // override for form's 'action' attribute
                type : "post", // 'get' or 'post', override for form's 'method' attribute
                dataType : "json" ,// 'xml', 'script', or 'json' (expected server response type)
                clearForm : true
            };

            // bind form using 'ajaxForm'
            // pre-submit callback
            function showRequest(formData, jqForm, options) {
                //获取提交的账号
                var account = formData[0].value;
                //获取提交的密码
                var password = formData[1].value;
                //获取提交的确认密码
                var repassword = formData[2].value;

               //判断账号是否为空
                if(account == ""){
                    alert("账号不能为空！");
                    return false;
                }
                //判断密码是否为空
                if(password == ""){
                    alert("密码不能为空！")
                    return false;
                }
                //判断确认密码是否为空
                if(repassword == ""){
                    alert("确认密码不能为空！");
                    return false;
                }

                return true;
            }

            // post-submit callback
            function showResponse(responseText, statusText, xhr, $form) {
            	if("success" == responseText.message){
            		location.href = "system/regSuccess.jsp";
            	}
            }

            $('#myForm').ajaxForm(options);

            //设置日期插件格式
            $('.form_datetime').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                startView: 4,
                minView:2,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                keyboardNavigation: 1,
                forceParse: 0,
            });

            //设置提示语句样式
            $("[data-toggle='toggle']").tooltip();

            //检查账号合法性
            $("#account").blur(function (){
                var account = $("#account").val();
                var re = RegExp("[0-9]{6,12}");
                if(account != "" && !re.test(account)){
                    alert("账号只能为6-12位的数字");
                }else{
                    $.ajax({
                        type : "post",
                        url : "RegisterBeforeServlet",
                        data : {
                            "account" : account
                        },
                        dataType : "json",
                        success : function(data) {
                            var message = data.message;
                            if (message) {
                                alert("账号已经被注册了！");
                            }
                        }
                    });
                }
            });

            //检查密码合法性
            $("#password").blur(function() {
                var password = $("#password").val();
                var re = RegExp("^[A-Za-z][A-Za-z0-9]{8,16}");
                if (password != "" && !re.test(password)) {
                    alert("密码必须以英文字母开头，且为8-16位的字母数字组合！");
                }
            });

            //判断两次输入的密码是否一致
            $("#repassword").blur(function() {
                var password1 = $("#password")[0].value;
                var password2 = $("#repassword")[0].value;
                if (password1 != password2) {
                    alert("前后两次的输入的密码不一致！");
                }
            });

            //复选框单击事件
           $("#myCheckbox").click(function(){
               if($("#myCheckbox").is(":checked") == true){
                   $("#mybutton").attr("disabled",false);
               }else{
                   $("#mybutton").attr("disabled",true);
               }
           });
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <div style="margin-bottom:10%;border-bottom:1px solid #e2e2e2;height: 150px;">
                <img alt="140x140" src="system/img/mashen_logo.jpg" style="width: 100%;height: 100%" />
            </div>
            <form role="form" id = "myForm">
                <div class="form-group">
                    <label for="account">账号</label><input type="text" class="form-control" id="account" data-toggle="toggle" title="账号只能为6-12位的数字" name = "account"/>
                </div>
                <div class="form-group">
                    <label for="password">密码</label><input type="password" class="form-control" id="password" data-toggle="toggle" title="密码必须以英文字母开头，且为8-16位的字母数字组合" name = "password"/>
                </div>
                <div class="form-group">
                    <label for="password">确认密码</label><input type="password" class="form-control" id="repassword" name = "repassword"/>
                </div>
                <div class="form-group">
                    <label>性别</label><br>
                    <input  type="radio" name = "sex" value="1" checked = "checked" />男
                    <input  type="radio" name = "sex" value="0" />女
                </div>
                <div class= "form-group">
                    <label class="control-label">出生日期</label>
                    <div class="controls input-append date form_datetime" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                        <input type="text"  class="form-control" value="2016-09-21" name = "birthday" readonly>
                        <span class="add-on"><i class="icon-remove"></i></span>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
                <button type="submit" class="btn btn-default" disabled = "true" id = "mybutton" style="background-color: #69b946">
                    <strong style="color: white">立即注册</strong></button>
                <div class="checkbox">
                    <label><input type="checkbox" id = "myCheckbox"/><span style="font-size: small">我已经阅读并同意相关服务条款和隐私政策</span></label>
                </div>
            </form>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>
</body>
</html>